import staticTop from "@/assets/images/top.png";
import { useLocalStorageState } from "ahooks";
import { LOCAL_APP_INFO } from "@/utils/const";
import { useMemo } from "react";

export const StatisticsHeader = () => {
  const [userInfo] = useLocalStorageState(LOCAL_APP_INFO);

  const phone = useMemo(() => {
    return userInfo?.phone || "-"
  },[userInfo])

  return (
    <div className="statistics-header">
      <div className="statistics-header-box">
        <div className="statistics-header-title-left">
          <div className="statistics-header-title-left-top">
            <span className="statistics-header-title-left-top-left">
              逛商超
            </span>
            <span className="statistics-header-title-left-top-right">
              更省钱
            </span>
          </div>
          <div className="statistics-header-title-left-footer">
            下午好，尊敬的{phone}~
          </div>
        </div>
        <div className="statistics-header-title-right">
          <img src={staticTop} alt="折扣" />
        </div>
      </div>
    </div>
  );
};
